<template>
  <div>
    <a-drawer
      :visible="visible"
      :width="1000"
      @close="closeModal"
      destroyOnClose
      title="品牌信息"
      :body-style="{
        height: '100%',
        boxSizing: 'border-box',
        overflow: 'hidden auto',
        background: '#fff',
        padding: '0',
      }"
    >
      <section class="content hide-scroller-bar">
        <a-row :gutter="[6, 6]" class="height">
          <a-col flex="1" class="left hide-scroller-bar height">
            <a-spin :spinning="spinning">
              <a-form layout="vertical">
                <a-card :bodyStyle="{ padding: '10px' }">
                  <a-row>
                    <a-col :span="24" class="title">
                      {{ brandDetail.brand_name }}
                    </a-col>
                    <a-col :span="24">
                      <a-row :wrap="false">
                        <a-col :span="12">
                          <img
                            v-if="brandDetail.brand_logo"
                            :src="brandDetail.brand_logo"
                            class="image"
                          />
                          <div v-else class="image-text">暂无图片</div>
                        </a-col>
                        <a-col flex="1">
                          <a-form-item label="业态">
                            {{ brandDetail.brand_cat_name || "--" }}
                          </a-form-item>
                          <a-form-item label="标签">
                            <a-tag v-for="item in tagList" :key="item.value">
                              {{ item.label || "--" }}
                            </a-tag>
                            <div v-if="!tagList.length">--</div>
                          </a-form-item>
                        </a-col>
                      </a-row>
                      <a-row>
                        <a-col :span="24">
                          <a-form-item label="品牌简介">
                            {{ brandDetail.brand_intro || "--" }}
                          </a-form-item>
                        </a-col>
                      </a-row>
                      <a-row class="mt-10">
                        <div class="text-title">品牌信息</div>
                        <a-col :span="12">
                          <a-form-item label="品牌定位">
                            {{ positionText || "--" }}
                          </a-form-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-item label="人均消费">
                            {{ brandDetail.brand_info?.consumption || "--" }}
                          </a-form-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-item label="经营方式">
                            {{ brandDetail.brand_info?.operation_mode || "--" }}
                          </a-form-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-item label="消费群体">
                            {{ brandDetail.brand_info?.consumer_group || "--" }}
                          </a-form-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-item label="注册国家">
                            {{ regCountryText || "--" }}
                          </a-form-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-item label="现有门店">
                            {{ brandDetail.brand_info?.store_count || "--" }}
                          </a-form-item>
                        </a-col>
                      </a-row>
                      <a-row
                        class="mt-20"
                        justify="space-between"
                        align="middle"
                      >
                        <a-col>
                          <div class="text-title">联系人信息</div>
                        </a-col>
                        <a-col>
                          <a-button type="primary" @click="addContactClick"
                            >+ 新增</a-button
                          >
                        </a-col>
                        <a-col :span="24" class="mt-10">
                          <a-table
                            :scroll="{ x: 'max-content' }"
                            :dataSource="dataSourceContact"
                            :columns="columnsContact"
                            :pagination="pagination"
                            @change="handleTableChange"
                            :loading="contactLoading"
                            :customRow="customRow"
                          >
                            <template #bodyCell="{ record, column }">
                              <template v-if="column.key == 'action'">
                                <a-space>
                                  <a-button
                                    type="link"
                                    size="small"
                                    @click.stop="editClick(record.id)"
                                  >
                                    编辑
                                  </a-button>
                                  <a-button
                                    type="link"
                                    size="small"
                                    danger
                                    @click.stop="deleteClick(record.id)"
                                  >
                                    删除
                                  </a-button>
                                </a-space>
                              </template>
                            </template>
                          </a-table>
                        </a-col>
                      </a-row>
                      <a-row class="mt-20 mb-20" v-if="false">
                        <div class="text-title">相关客户信息</div>
                        <a-col :span="24">
                          <a-table
                            :dataSource="dataSource"
                            :columns="columns"
                            :pagination="false"
                          />
                        </a-col>
                      </a-row>
                      <div class="text-title">公司信息</div>
                      <a-row class="plr-10" :gutter="[6, 6]">
                        <a-col :span="12">
                          <a-form-item label="所属公司">
                            {{ brandDetail.company_info?.company_name || "--" }}
                          </a-form-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-item label="公司法人">
                            {{ brandDetail.company_info?.company_boss || "--" }}
                          </a-form-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-item label="联系电话">
                            {{ brandDetail.company_info?.telphone || "--" }}
                          </a-form-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-item label="邮箱">
                            {{ brandDetail.company_info?.email || "--" }}
                          </a-form-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-item label="官网地址">
                            {{ brandDetail.company_info?.home_url || "--" }}
                          </a-form-item>
                        </a-col>
                        <a-col :span="12">
                          <a-form-item label="联系地址">
                            {{ brandDetail.company_info?.address || "--" }}
                          </a-form-item>
                        </a-col>
                      </a-row>
                    </a-col>
                  </a-row>
                </a-card>
              </a-form>
            </a-spin>
          </a-col>
          <a-col class="right hide-scroller-bar">
            <a-spin :spinning="followSpinning">
              <div class="follow-records">
                <div class="follow-title">跟进记录</div>
                <a-timeline v-if="brandFollowList.length">
                  <a-timeline-item
                    v-for="item in brandFollowList"
                    :key="item.id"
                  >
                    <div>{{ item.follow_uname }}</div>
                    <div class="mt-5">{{ item.created_at }}</div>
                    <div class="mt-5">{{ item.follow_txt }}</div>
                    <div class="mt-5">
                      <a-tag>{{ item.follow_tag.contact }}</a-tag>
                      <a-tag>{{ item.follow_tag.status }}</a-tag>
                    </div>
                  </a-timeline-item>
                </a-timeline>
                <a-empty v-else :image="simpleImage" />
              </div>
            </a-spin>
          </a-col>
        </a-row>
      </section>
    </a-drawer>

    <!-- 新增联系人 -->
    <AddContacts
      :visible="visibleAddContact"
      :id="brandDetail.id"
      :contactId="contactId"
      @success="successContactChange"
      @close="visibleAddContact = false"
    />

    <!-- 跟进信息 -->
    <FollowUp
      :visible="visibleFollowUp"
      :id="brandDetail.id"
      :contactData="contactData"
      @success="successFollowUpChange"
      @close="visibleFollowUp = false"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  toRefs,
  computed,
  watch,
  reactive,
  createVNode,
} from "vue";
// import {} from "@ant-design/icons-vue";
import { Modal, Form, message, Empty } from "ant-design-vue";
import request from "@/common/utils/request";
import AddContacts from "./AddContacts.vue";
import FollowUp from "./FollowUp.vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "PreviewDetail",
  components: { AddContacts, FollowUp },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
  },
  setup(props, context) {
    const state = reactive({
      count: 0,
      spinning: false,
      columns: [
        {
          title: "客户姓名",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "客户编号",
          dataIndex: "number",
          key: "number",
        },
        {
          title: "客户等级",
          dataIndex: "level",
          key: "level",
        },
        {
          title: "客户状态",
          dataIndex: "status",
          key: "status",
        },
        {
          title: "需求面积",
          dataIndex: "area",
          key: "area",
        },
      ],
      dataSource: [],

      dataSourceContact: [],
      columnsContact: [
        {
          title: "联系人",
          dataIndex: "contact_name",
          key: "contact_name",
        },
        {
          title: "联系电话",
          dataIndex: "contact_phone",
          key: "contact_phone",
          width: 120,
        },
        {
          title: "公司",
          dataIndex: "contact_company",
          key: "contact_company",
          width: 120,
        },
        {
          title: "职务",
          dataIndex: "contact_job",
          key: "contact_job",
          width: 100,
        },
        {
          title: "操作",
          key: "action",
          fixed: "right",
          width: 80,
        },
      ],

      visibleAddContact: false,
      brandDetail: {},
      tagList: [],
      positionText: "",
      regCountryText: "",

      page: 1,
      pageSize: 20,
      total: 0,
      contactLoading: false,

      contactId: 0,

      visibleFollowUp: false,
      contactData: {},
      brandFollowList: [],

      followSpinning: false,

      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE
    });

    const customRow = (record) => {
      return {
        style: {
          cursor: "pointer",
        },
        onClick: () => {
          followUpClick(record);
        },
      };
    };

    const addContactClick = () => {
      state.contactId = 0;
      state.visibleAddContact = true;
    };

    const successContactChange = () => {
      state.visibleAddContact = false;
      getContactQuery();
    };

    const handleTableChange = (pager) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getContactQuery();
    };
    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
    }));

    const getContactQuery = () => {
      state.contactLoading = true;
      request
        .post("/org", "/org/brand/custom/brand/contact/query", {
          brand_id: props.id,
          page: state.page,
          pageSize: state.pageSize,
        })
        .then((res) => {
          state.dataSourceContact = res.list;
          state.total = res.total;
          state.contactLoading = false;
        });
    };

    // 编辑联系人
    const editClick = (id) => {
      state.contactId = id;
      state.visibleAddContact = true;
    };

    // 删除联系人
    const deleteClick = (id) => {
      Modal.confirm({
        title: `确认要删除该联系人吗？`,
        icon: createVNode(ExclamationCircleOutlined),
        centered: true,
        onOk() {
          request
            .del("/org", `/org/brand/custom/brand/contact/${id}`)
            .then((res) => {
              message.success("删除成功");
              getContactQuery();
            });
        },
      });
    };

    // 跟进
    const followUpClick = (record) => {
      state.contactData = record;
      state.visibleFollowUp = true;
    };

    const successFollowUpChange = () => {
      state.visibleFollowUp = false;
      getBrandFollowQuery();
    };

    const getBrandFollowQuery = () => {
      state.followSpinning = true;
      request
        .post("/org", "/org/custom/brand/custom/brand/follow/query", {
          brand_id: props.id,
          page: 1,
          pageSize: 100000,
        })
        .then((res) => {
          state.brandFollowList = res.list;
          state.followSpinning = false;
        })
        .catch(() => {
          state.followSpinning = false;
        });
    };

    const closeModal = () => {
      context.emit("onClose");
    };

    const getDictList = () => {
      request
        .get("/org", "/system/dict/data", { dict_menu_alias: "orgCustomBrand" })
        .then((res) => {
          let brandTagList = res.list.filter(
            (item) => item.dict_type == "org_custom_brand_tag"
          );
          let positionOptions = res.list.filter(
            (item) => item.dict_type == "org_custom_brand_position"
          );
          let regCountryOptions = res.list.filter(
            (item) => item.dict_type == "org_custom_brand_reg_country"
          );
          let deviceTagOptions = res.list.filter(
            (item) => item.dict_type == "org_custom_brand_device_tag"
          );
          let storeTypeOptions = res.list.filter(
            (item) => item.dict_type == "org_custom_brand_store_type"
          );
          state.tagList = brandTagList.filter((item) =>
            state.brandDetail.brand_tag.includes(item.value)
          );
          state.positionText = positionOptions.filter(
            (item) => item.value == state.brandDetail.brand_info.position
          )[0]?.label;
          state.regCountryText = regCountryOptions.filter(
            (item) => item.value == state.brandDetail.brand_info.reg_country
          )[0]?.label;
        });
    };

    const getCustomBrand = () => {
      state.spinning = true;
      request
        .get("/org", `/org/brand/custom/brand/${props.id}`)
        .then((res) => {
          state.brandDetail = res.detail;
          state.spinning = false;
          getDictList();
        })
        .catch((err) => {
          state.spinning = false;
        });
    };

    const init = () => {
      getBrandFollowQuery();
      getCustomBrand();
      getContactQuery();
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          state.brandFollowList = [];
        }
      }
    );

    return {
      ...toRefs(state),
      closeModal,
      successContactChange,
      addContactClick,
      handleTableChange,
      pagination,
      deleteClick,
      editClick,
      followUpClick,
      successFollowUpChange,
      customRow,
    };
  },
});
</script>

<style lang="less" scoped>
.height {
  height: 100%;
}
:deep(.ant-form-vertical .ant-form-item-label) {
  padding: 0 !important;
}

.content {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  background: #f7f7f7;

  .left {
    overflow: hidden auto;
    :deep(.ant-card-bordered) {
      border: none !important;
    }
    :deep(.ant-form-item) {
      margin-bottom: 20px;
    }
    .title {
      font-size: 24px;
      font-weight: 600;
    }
    .image {
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0;
    }
    .image-text{
      padding: 50px;
      color: #848fad;
    }
  }
  .right {
    width: 300px;
    height: 100%;
    overflow: hidden auto;
    margin-left: 5px;
    background: #fff;
    .follow-records {
      padding: 10px;
      .follow-title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
